<template>
  <div class="bigback">
  <yd-navbar title="我的卡" bgcolor="#008eff" color="#ffffff">
    <router-link to="#" slot="left">
      <yd-navbar-back-icon color="#ffffff"></yd-navbar-back-icon>
    </router-link>
  </yd-navbar>
  <div class="bigback">
    <img src="http://jysh.oss-cn-qingdao.aliyuncs.com/wx%2Fcard.jpg">
  </div>
  <div class="xback">
    <img src="http://jysh.oss-cn-qingdao.aliyuncs.com/HomeTour%2Fimg%2Fclub%2Fcard_split.png">
  </div>
  <div class="cardno" id="cardno"><span>NO: </span><span id="num">{{numb}}</span></div>
  <canvas  class="ticode" id="ticode"></canvas >
  <yd-button size="large" type="primary" shape="circle" class="dbtn1">我的居游电子票</yd-button>
  <yd-button size="large" type="primary" shape="circle" class="dbtn2">查看我的卡夹</yd-button>
  </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  name: '#num',
  data () {
    return {
      cardno: ''
    }
  },
  mounted: function () {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.getCardInfo,
        seccess: (resultData) => {
          if (resultData.data && resultData.errcode === 0) {
            var canvas = document.getElementById('ticode')
            QRCode.toCanvas(canvas, 'http://www.baidu.com', function (error) {
              if (error) console.error(error)
              console.log('success!');
            })
          } else {
            this.$dialog.toast({mes: resultData.errmsg})
          }
        }
      });
    },
    splitBy4(str) {
      if (str.length === 12) {
        str = this.insert_flg(str, ' ', 4)
        str = this.insert_flg(str, ' ', 9)
      }
      return str
    },
    insert_flg(str, flg, sn) {
      var newstr = ''
      for (var i = 0; i < str.length; i += sn) {
        var tmp = str.substring(i, i + sn)
        newstr += tmp + flg
      }
      return newstr
    }
  }
}
</script>

<style>
body{
  background-color: #ddebbc;
}
.bigback img{
  width: 100%;
  height: 250px;
}
.xback img{
  width: 100%;
  height: 70px;
}
.cardno{
  position: absolute;
  left: 50px;
  top: 235px;
  letter-spacing:1px;
  font-size: 20px;
}
.cdno{
  letter-spacing:5px;
  font-size: 20px;
}
.btnstyle{
  background-color: #738a3a;
}
.ticode{
  position: absolute;
  left: 18.1%;
  top: 360px;
  width: 64.6%;
  height: 200px;
  background-color: #fff;
}
.dbtn1{
  position: absolute;
  background-color: #738a3a;
  left: 18.1%;
  top: 570px;
  width: 64.6%;
  height: 50px;
  margin: auto;
  box-shadow: 3px 3px 5px black;
}
.dbtn2{
  position: absolute;
  left: 18.1%;
  background-color: #738a3a;
  top: 630px;
  width: 64.6%;
  height: 50px;
  margin: auto;
  box-shadow: 3px 3px 5px black;
}
</style>
